In diesem Kapitel schauen wir uns Regeln, Selektoren und Pseudoklassen von CSS an.

In CSS sind Eigenschaften innerhalb von Regelsätzen organisiert. Ein Regelsatz besteht aus einem Selektor oder einer Gruppe von Selektoren, gefolgt von einem durch geschweifte Klammern begrenzten Bereich, in dem eine oder mehrere Deklarationen stehen, in denen Eigenschaften ein Wert zugewiesen wird. Eine Deklaration benötigt zwischen Eigenschaft und Wert einen Doppelpunkt und schließt mit einem Semikolon ab.

Der Selektor legt fest, für welche Elemente die Regel gilt. Die Deklarationen bestimmen die Darstellung der Elemente. Eine Deklaration weist einer Eigenschaft einen Wert zu. Deklarationen werden durch Semikolon getrennt.

Hier sehen Sie eine Übersicht der wichtigsten CSS-Attribute. Zur Schriftformatierung gehört die Schriftart, -stil, -größe, -gewicht und -farbe. Zur Absatzformatierung gehört die Texteinrückung und -ausrichtung, Zeilenhöhe und -umbruch. Zum Außenrandabstand gehört der Abstand des Elementrandes zu den Nachbarelementen. Zum Innenabstand gehört der Abstand des Elementinhaltes zum Elementrand. Zum Rahmen gehört der Rahmentyp, die Dicke und Farbe. Zum Hintergrund gehören die Hintergrundfarben und -bilder. Zur Listenformatierung gehört der Listentyp, das Symbol und die Einrückung. Zur Tabellenformatierung gehört die Tabellengröße, der Tabellenrahmen und die Tabellenzellen. Zur Positionierung gehört die x-y-Position, die Größe und Anzeigeart von Elementen.

Es gibt einige verschiedene Selektoren. Der Universal-Selektor Stern spricht alle Elemente des Dokuments an. Sie können als Typ-Selektor auch einen konkreten HTML-Typ angeben; dann werden alle Elemente dieses Typs angesprochen wie h-eins, p oder q. HTML-Elemente können mit einer ID versehen werden, solche Elemente gibt es nur einmal auf der ganzen Webseite. Die können dann ganz gezielt per CSS angesprochen werden. HTML-Elemente können mit einer Klasse versehen werden, solche Elemente kann es mehrmals auf der ganzen Webseite geben. Damit kann man eine Kategorie von Elementen ansprechen.

Mit Gruppen werden alle aufgezählten Elemente gleichzeitig angesprochen. Sie können auch sogenannte Nachfahren ansprechen. Manchmal ist der Kontext wichtig, soll beispielsweise nur ein Zitat angesprochen werden, das innerhalb eines Absatzes liegt, ist das Zitat der Nachfahre des Absatzes. Außerdem können Sie Pseudoklassen ansprechen. Das sind eingebaute Klassen, die auf bestehende HTML-Elemente angewendet werden können. Jeder der Selektoren wird nachfolgend mit einem Beispiel vorgestellt.

Hier sprechen Sie mit dem Universal-Stern-Selektor alle HTML-Elemente einer Seite an. Alles, was blau werden kann, wird dann blau.

Hier wird nur ein spezieller HTML-Elementetyp angesprochen. Dies ist das paragraph-Element p. Alle Absätze werden dann blau.

In diesem Beispiel wird nur das einzige Element mit der ID "beispiel" durch CSS konfiguriert. Vor dem Namen der ID muss ein hash-Symbol angegeben werden.

Ein Klassen-Selektor kann mehrere Elemente ansprechen, die von einer Klasse sind. Im CSS müssen Sie dann einen Punkt vor den Namen der Klasse setzen.

Ganze Gruppen von HTML-Elementen können Sie ansprechen, indem Sie die Elemente im CSS durch Komma trennen.

Wenn Sie Nachfahren ansprechen wollen, schreiben Sie im CSS zunächst das obergeordnete Element auf. In diesem Fall ist das die ID "beispiel". Auf alle Zitate q innerhalb dieses ID-Elements wird dann die entsprechende CSS-Formatierung angewendet. Andere Zitate auf der Webseite sind davon nicht betroffen.

Schauen wir uns abschließend noch den Zugriff auf CSS-Pseudoklassen an. Pseudoklassen sind Selektoren zur Auswahl von Elementen, die nicht eigenständig im HTML ausgezeichnet sind. Ein oft verwendetes Beispiel dafür sind Hyperlinks "a". Link ist der Originalzustand des Hyperlinks im sichtbaren Text. Visited ist der Link, nachdem er schon einmal besucht beziehungsweise angeklickt wurde. Hover wird aufgerufen, wenn die Maus über dem Link steht. Active ist der Link, wenn er gerade angeklickt wird. Focus gilt für den Fall, dass das Element gerade den Fokus besitzt. Den Fokus kann man zum Beispiel durch Drücken der Tabulator-Taste ändern.

Pseudoklassen sind aber nicht auf Links beschränkt. Sie gelten auch für Container, Formularelemente und so weiter. Abschließend sehen Sie eine CSS-Definition, wie die Pseudoklassen Link, visited, active und hover eines Links optisch darzustellen ist. Bitte probieren Sie die ganzen Quelltexte einmal aus!